import * as PIXI from 'pixi.js'
import useMainStore from '@renderer/store/modules/useMainStore'
import { setPixi } from '@renderer/store/modules/usePixiStore'
import useDiyStore from '@renderer/store/modules/useDiyStore'
import modal from './modal'
import diyBg from './diyBg'
import close from './close'
import option from './option'
import preview from './preview'
import { resetSpaceUsage } from './param'

export default async (): Promise<void> => {
  resetSpaceUsage() // 重置空间使用情况
  const mainStore = useMainStore()
  const app = await mainStore.getApp()
  const mainContainer = app.stage.getChildByLabel('main') as PIXI.Container
  const diyStore = useDiyStore()
  const container = new PIXI.Container({
    visible: diyStore.visible,
  })
  const modalContainer = await modal() // 模态框
  const diyBgContainer = await diyBg() // 背景
  const optionContainer = await option() // 选项
  const previewContainer = await preview() // 预览
  const closeContainer = await close() // 关闭按钮
  container.addChild(modalContainer) // 模态框
  container.addChild(diyBgContainer) // 背景
  container.addChild(optionContainer) // 选项
  container.addChild(previewContainer) // 预览
  container.addChild(closeContainer) // 关闭按钮
  setPixi('diyModal', container)
  mainContainer!.addChild(container)
}
